<template>
  <div>
    <el-row class="m-b-sm">
      <el-col :span="3">
        <el-button type="primary" size="mini">XPath Selector</el-button>
      </el-col>
      <el-col :span="18">
        {{ xpathSelector }}
      </el-col>
      <el-col :span="1">
        <el-button type="primary" size="mini" v-clipboard:copy="xpathSelector" v-clipboard:success="onCopy"
                   v-clipboard:error="onError">{{ $lang[$store.state.lang].buttons.copy }}
        </el-button>
      </el-col>
    </el-row>
    <el-row class="m-b-md">
      <el-col :span="3">
        <el-button type="primary" size="mini">CSS Selector</el-button>
      </el-col>
      <el-col :span="18">
        {{ cssSelector }}
      </el-col>
      <el-col :span="1">
        <el-button type="primary" size="mini" v-clipboard:copy="cssSelector" v-clipboard:success="onCopy"
                   v-clipboard:error="onError">{{ $lang[$store.state.lang].buttons.copy }}
        </el-button>
      </el-col>
    </el-row>
    <iframe sandbox="allow-same-origin allow-scripts" scrolling="yes" width="100%" :srcdoc="html"
            class="iframe-box" id="iframe-box" frameborder="0"></iframe>
  </div>

</template>
<script>
  import $ from 'jquery'
  import VueClipboard from 'vue-clipboard2'
  import Vue from 'vue'
  Vue.use(VueClipboard)

  $.fn.extend({
    getCSSSelector: function () {
      var path, node = this;
      while (node.length) {
        var realNode = node[0], name = realNode.localName;

        var classes = $(realNode).attr('class');
        var cls = '';
        if (classes) {
          classes = classes.split(' ');
          for (let i = 0; i < classes.length; i++) {
            if (classes[i]) {
              cls += '.' + classes[i];
            }
          }
        }

        if (!name) break;
        name = name.toLowerCase();

        if (cls) {
          name = name + cls;
        }

        var parent = node.parent();

        var sameTagSiblings = parent.children(name);
        if (sameTagSiblings.length > 1) {
          var allSiblings = parent.children();
          var index = allSiblings.index(realNode) + 1;
          if (index > 1) {
            name += ':nth-child(' + index + ')';
          }
        }

        if (name !== 'html' && name !== 'body') {
          path = name + (path ? ' > ' + path : '');
        }
        node = parent;

      }
      return path;
    },
    getXPathSelector: function () {
      var path, node = this;
      if (node.id) return "//*[@id='" + node.id + "']"
      var position,
        $node = this.first(),
        nodeName = $node.prop('nodeName'),
        $sibSameNameAndSelf = $node.siblings(nodeName).addBack(),
        steps = [],
        $parent = $node.parent(),
        parentName = $parent.prop('nodeName');

      position = ($sibSameNameAndSelf.length > 1) ? '[' + ($sibSameNameAndSelf.index($node) + 1) + ']' : '';
      steps.push(nodeName + position);

      while ($parent.length == 1 && parentName !== node && parentName.toLowerCase() !== '#document' && parentName.toLowerCase() !== 'html' && parentName.toLowerCase() !== 'body') {
        $sibSameNameAndSelf = $parent.siblings(parentName).addBack();
        position = ($sibSameNameAndSelf.length > 1) ? '[' + ($sibSameNameAndSelf.index($parent) + 1) + ']' : '';
        steps.push(parentName + position);
        $parent = $parent.parent();
        parentName = $parent.prop('nodeName');
      }
      return '//' + steps.reverse().join('/').toLowerCase();
    }
  });
  function getCSSSelector(element) {
    return $(element).getCSSSelector();
  }
  function getXPathSelector(element) {
    return $(element).getXPathSelector();
  }

  export default {
    name: 'Web',
    data() {
      return {
        xpathSelector: null,
        cssSelector: null,
      }
    },
    props: {
      html: {
        type: String,
      }
    },
    methods: {
      onCopy: function () {
        this.$message.success(this.$lang[this.$store.state.lang].messages.successCopy)
      },
      onError: function () {
        this.$message.error(this.$lang[this.$store.state.lang].messages.errorCopy)
      },
    },
    mounted() {
      let that = this
      let iframe_id = 'iframe-box'
      $('#' + iframe_id).on("load", function () {
        document.getElementById(iframe_id).contentWindow.document.body.onclick =
          function (event) {
            event.preventDefault()
            event.stopPropagation()
            let target = $(event.target)
            console.log(getCSSSelector(target))
            that.cssSelector = getCSSSelector(target)
            that.xpathSelector = getXPathSelector(target)

            $(document.getElementById(iframe_id).contentWindow.document.body).find('.gerapy-selected').remove()
            $(document.getElementById(iframe_id).contentWindow.document.body).find(getCSSSelector(target)).each(function () {
              $('<div></div>').css($(this).offset()).css({
                'width': target.width(),
                'height': target.height(),
                'position': 'absolute',
                'border': '2px solid red',
                'pointer-events': 'none',
                'z-index': 10000
              }).addClass('gerapy-selected').appendTo($(document.getElementById(iframe_id).contentWindow.document.body))
            })

          }
      });
    }
  }
</script>
<style scoped>
  iframe html {
    cursor: pointer;
  }
</style>
